<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title> index </title>
    <style>
        * {
            font-family: Arial, Helvetica, sans-serif;
        }

        a {
            text-decoration: none;
        }

        a:hover {
            color: rgb(207, 191, 191);
            background: #000;
        }
    </style>
</head>

<body>

    <div id="app">
        <h1>index.html  |   图片放在 yxb\static\img\ 下面 </h1>
        <div style="display: flex;  justify-content: space-around;">
            <h1> <a href="/add" target="_blank"> ADD </a></h1>
            <h1> <a href="/edit?file_id=TEST.txt" target="_blank"> edit: TEST.txt </a></h1>
            <h1> 一共多少个文件: </h1>
            <h1 id="get_all_files_number"> </h1>
        </div>
        <div>
            <span v-for="(item, index) in file_list">
                <a :href="'/edit?file_id=' + item" target="_blank" style="padding: 6px;  font-size: 22px; border: 1px solid darkcyan; margin:6px; display: inline-block;">[[ index ]] - [[ item ]]</a>
            </span>
        </div>
        <br>
        <img src="static/img/test.jpg">
        <h1> <a target="_blank" href="/mysql"> 大文本排版换行测试 ( and SQL 测试 ) </a></h1>

        <button @click="ajax_test()" style="font-size: 36px;">ajax test - 打开 console.log </button>
        <h1> <a target="_blank" href="/name/传参_test"> 传参 测试 </a></h1>
        <h1> {{title}}</h1>

        <h1>[[ title ]]</h1>
        <h3>[[ file_list ]]</h3>

    </div>

    <br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br>
</body>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.5/vue.global.min.js" type="application/javascript"></script>
<script>
    let file_list = JSON.parse('{{ file_list|safe }}');
    console.log(file_list);

    let get_all_files_number = '{{ get_all_files_number|safe }}';
    console.log(get_all_files_number);
    document.getElementById("get_all_files_number").innerText = get_all_files_number;

    const { createApp } = Vue
    createApp({
        delimiters: ['[[', ']]'],
        data() {
            return {
                title: "data.title",
                file_list: file_list,
            }
        },
        methods: {
            ajax_test: function () {
                // $.ajax的this作用域已经变了，所以要用一个变量接收 vue实例
                // alert(123123)
                let this_ = this;
                let url = "/ajax/test/";
                let method = 'POST';
                // let method='GET';
                let postObj = {
                    id: 233,
                    title: "大家好"
                };
                let xhr = new XMLHttpRequest();
                xhr.open(method, url, true);
                xhr.setRequestHeader('Content-type', 'application/json; charset=UTF-8')
                xhr.send(JSON.stringify(postObj));
                xhr.onload = function () {
                    if (xhr.status === 200) {
                        console.log(xhr.responseText);
                    }
                }
            }
        }
    }).mount('#app')

</script>

</html>